<template>
  <a-row :gutter="gutter" type="flex" class="text-row">
    <a-col :span="colSpan[0]">{{ label + getSemi() }}</a-col>
    <a-col :span="colSpan[1]">
      <slot>{{ text }}</slot>
    </a-col>
  </a-row>
</template>

<script>
export default {
  name: 'text-row',
  props: {
    semi: { type: [String, Boolean], default: true },
    label: { type: String, default: '' },
    text: { type: [String, Number], default: '' },
    colSpan: { type: Array, default: () => [6, 18] },
    gutter: { type: Number, default: 0 },
  },
  methods: {
    getSemi() {
      if (typeof this.semi !== 'boolean') {
        return this.semi;
      }
      return this.semi ? '：' : '';
    },
  },
};
</script>

<style scoped lang="less">
.text-row {
  line-height: 28px;
  font-family: Microsoft YaHei, 'Avenir', Helvetica, Arial, sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #ffffff;
}
</style>
